<template>
	 <div class='bread_container' id="bread_container">
	    <!-- <span @click="handleLefeMenu" class="bars"> 
			<icon-svg icon-class="iconmenu-fold" :class="{isactive:changeBarDirection}" />
		</span> -->

			<!-- <i :class="mainIcon"></i> -->
        <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
			<icon-svg v-if="mainIcon" :icon-class="mainIcon" class="breadcrumb_icon"/>
            <el-breadcrumb-item 
                v-for='(name,index) in matchedArr'
				:key='index'
				>
				{{ name }}
			</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
</template>


<script>

export default {
	data(){
		return {
			changeBarDirection:false,
			mainIcon:'',
		}
	},
	created() {
	},
	computed:{
		matchedArr(){
			let temp = [],temps = [];
			this.$route.matched.filter((item,index,self) => {
				if(index == 0) {
					this.mainIcon = item.meta.icon
				}
				if(item.meta){
					const name = item.meta.title;
				    temp.push(name);
				}
			});
			temps = temp;
			// console.log(temp)
			// temp.filter((item,index,self) => {
				// 	if(!temps.includes(item)){
					// temps.push(item);                
			// 	}
			// })
			return temps;
		}
	},
	mounted(){
	},
	methods:{
		handleLefeMenu(){
		    this.$store.dispatch('setLeftCollapse');  // 折叠菜单
			this.$store.dispatch('handleLeftMenu');  // 改变菜单宽度 180->35/35-180
			this.changeBarDirection = !this.changeBarDirection;
		}
	},
	watch: {
     
    }
}



</script>

<style lang="less">
	.bread_container{
		background-color: #fff;
		width: 100%;
		// border-bottom: 1px solid #e1e1e1;
		// border-top: 1px solid #e1e1e1;
		box-sizing: border-box;
		.bars{
			float: left;
            margin: 4px 10px;
			cursor: pointer;
			.isactive{
				-webkit-transform: rotate(90deg);
				transform: rotate(90deg);
				transition: .38s;
				-webkit-transform-origin: 50% 50%;
				transform-origin: 50% 50%;
			}
		}
		.breadcrumb{
			height: 50px;
			line-height: 50px;
			padding: 0 20px;
			box-sizing: border-box;
			.breadbutton{
				float:left;
				margin:4px 5px 0 0;
				
			}
			.breadcrumb_icon{
				margin-top: 16px;
				float: left;
				margin-right: 10px;
			}
		}
	}
</style>


